<template>
  <div style="padding: 20px">
    <span style="font-size: 32px;color: #5a5760">抖音工具</span> <span>视频下载以及去水印</span>
    <el-input  placeholder="请输入抖音分享口令" v-model="douyinToken" style="padding-top: 20px">

    </el-input>
    <el-button type="primary" style="margin-top: 20px" @click="analysisToken">解析口令</el-button>
    <el-button v-if="!downloadDisabled" type="primary" style="margin-top: 20px" :disabled="downloadDisabled" @click="downloadVideo">视频下载</el-button>
    <el-input  placeholder="口令解析结果" v-model="douyinVideoUrl" style="padding-top: 20px"></el-input>

    <div style="font-size: 24px;color: #5a5760;margin-top: 10px;margin-bottom: 10px">视频解析结果</div>
    <div v-if="!downloadDisabled">
      <div style="font-size: 12px;">作者：{{author}}</div>
<!--      <el-image  style="width: 300px; height: 250px" :src="douyinImgUrl" fit="contain"-->
<!--                 :zoom-rate="1.2"-->
<!--                 :max-scale="7"-->
<!--                 :min-scale="0.2"-->
<!--                 :preview-src-list="douyinImgUrlList"-->
<!--                 :initial-index="0"/>-->
      <video  :src="douyinVideoUrl" controls="controls" style="width: 300px; height: 250px"></video>
      <div>
        <el-badge :value="comments" :max="999" class="item">
          <el-button  :icon="ChatLineRound" circle size="small"/>
        </el-badge>
        <el-badge :value="shares" :max="999" class="item">
          <el-button :icon="Share" circle color="Orange" size="small" />
        </el-badge>
        <el-badge :value="collect" :max="999" class="item">
          <el-button :icon="Star" type="warning" circle size="small" />
        </el-badge>
      </div>


    </div>
    <div v-if="downloadDisabled" style="width: 100px; height: 100px;background-color: #72767b" >

    </div>





  </div>
</template>

<script  >
import {

  ChatLineRound,
  Star,
  Share
} from '@element-plus/icons-vue'
import axios from "axios";
import {apiAcceptData} from "@/api";
export default {
  name: "DouyinTool",
  /* eslint-disable */
  components:{ChatLineRound,Star,Share },
  data(){
    return {
      ChatLineRound:ChatLineRound,
      Star:Star,
      Share:Share,
      douyinToken : "",
      douyinVideoUrl:"",
      douyinImgUrl:"",
      douyinImgUrlList:[""],
      downloadDisabled:true,
      comments:200,
      shares:300,
      collect:1400,
      author:"央视网",
      desc:""

    }
  },
  methods:{
    async analysisToken(){
      var that  = this
      if(undefined == that.douyinToken || "" == that.douyinToken){
        that.$message.error("请先输入抖音口令");
        return;
      }
      const params = {
        douyinToken:that.douyinToken
      }
      const  result = await apiAcceptData("/douyin/dyGetVideoFileWithToken",params)

      if(result == undefined || result == null){
        that.$message.error("解析错误，请检查链接是否正确或者稍候重试！");
        return
      }
      that.$message.success("解析成功！");
      that.desc = result.dec
      that.author = result.author
      that.douyinImgUrl=  result.pageImgUrl
      that.douyinVideoUrl = result.videoUrl
      that.douyinImgUrlList = [that.douyinImgUrl]
      that.comments=result.videoStatics.comment_count
      that.shares=result.videoStatics.share_count
      that.collect=result.videoStatics.collect_count

      that.downloadDisabled = false


    },
    downloadVideo(){
      var that  = this
      var filename = that.desc+".mp4"
      axios({
        method: 'get',
        url: that.douyinVideoUrl,

        responseType: 'blob'// 设置响应类型为blob
        // responseType: 'blob',
      })
          .then((response ) => {
            // 处理文件下载
            const url = window.URL.createObjectURL(new Blob([response ]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', filename); // 指定下载文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          })
          .catch((res) => {
            console.log(res);
            ElMessage({
              message: "下载失败，"+res,
              type: 'error',
            })
          });
    }
  }
}
</script>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>